<template>
    <div>
        <div>
            <!-- layout布局 span默认值为24（栅格的宽度） -->
            <el-row type="flex" justify="end">
                <el-col :span="2" style="line-height:35px">
                    一级选择器:
                </el-col>
                <el-col :span="4">
                    <el-input v-model="search" placeholder="输入被保险人名搜索" />
                </el-col>
                <el-col :span="2" style="line-height:35px;margin-left:20px">
                    二级选择器:
                </el-col>

                <el-col :span="4">
                    <el-select v-model="value" clearable placeholder="是否在保">
                        <el-option label="在保" value="在保"></el-option>
                        <el-option label="未在保" value="未在保"></el-option>
                    </el-select>
                    <!-- <div class="radio" style="margin-top:6px">
                        <el-radio v-model="value" label="在保">在保</el-radio>
                        <el-radio v-model="value" label="未在保">未在保</el-radio>
                    </div> -->
                </el-col>
            </el-row>
        </div>
        <!-- 表格内容 -->
        <el-table style="width:100%"
            :data="tableData.filter(data => !search || (data.sum.includes(search) && (data.state.includes(value))))">
            <el-table-column label="序号" prop="id"></el-table-column>
            <el-table-column label="保单号" prop="user"></el-table-column>
            <el-table-column label="被保险人" prop="sum"></el-table-column>
            <el-table-column label="起保日期" prop="start"></el-table-column>
            <el-table-column label="终止日期" prop="end"></el-table-column>
            <el-table-column label="投保人" prop="sumto"></el-table-column>
            <el-table-column label="投保日期" prop="data"></el-table-column>
            <el-table-column label="保单状态" prop="state"></el-table-column>
            <el-table-column label="计划开始日期" prop="planstart" style="width:160px"></el-table-column>
            <el-table-column label="计划结束日期" prop="planend" style="width:160px"></el-table-column>
            <el-table-column label="超期监控" prop="monitor"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)" plain>查看
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align:center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            currentPage4: 4,
            tableData: [
                {
                    id: "1",
                    user: "PZFS21330205000000000255",
                    sum: "慈溪市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "1",
                    user: "PZFS21330205000000000255",
                    sum: "慈溪市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "1",
                    user: "PZFS21330205000000000255",
                    sum: "余姚市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "未在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "1",
                    user: "PZFS21330205000000000255",
                    sum: "余姚市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "1",
                    user: "PZFS21330205000000000255",
                    sum: "余姚市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "未在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "1",
                    user: "PZFS21330205000000000255",
                    sum: "象山县胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "1",
                    user: "PZFS21330205000000000255",
                    sum: "鄞州区胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "未在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
            ],
            search: '',

            value: ''
        }
    },
    created() { //页面渲染之前执行
    },
    mounted() {
    },
    watch: {  //监听

    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        //   ToDo   
        handleEdit(index, row) {
            console.log(index, row);
        },
    }
}
</script>